<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>FUN_GOBANG</title>
    <script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>
    <script>
        var countdown = function(timeout) {
            clearInterval(time);
            var countUI = document.getElementById("count");
            if(!!countUI) {
                countUI.innerHTML = timeout;
                if (timeout == 0) {
                    alert("时间到！请落子");
                }
                else {
                    timeout--;
                    time = setTimeout(function(){
                        countdown(timeout)
                    }, 1000);
                }
            }
        }
    </script>
    <style>
      *{
        margin:0;
        padding:0;
        text-decoration: none;
        font-family: montserrat;
      }
      body{
        margin-top: 148px;
        margin-left: 620px;
        /* 设置段落的最小高度： */
        min-height: 83vh;
        /* linear-gradient:创造渐变效果 */
        background-image: linear-gradient(120deg,#d9a7c7,#fffcdc);
      
      }

      .mybutton{
        width: 75%;
        height: 50px;
        border: none;
        background: linear-gradient(120deg,#bfe6ba,#c9d6ff,#9d50bb);
        background-size: 200%;
        color: #fff;
        margin: 10px 0;
        font-size: 15px;
        /* cursor:pointer：设置鼠标样式 */
        cursor:pointer;
        transition: .5s;
      }

      .mybutton:hover{
        background-position:right ;
      }
      .reco{
        width: 800px;
        margin-top: 20px;
      }
      #time{
        width: 500px;
        position: absolute;
        top: 100px;
        color: white;
        font-size: 30px;
      }
      #count{
        display: inline-block;
      }
    </style>
  </head>

  <body>
    <div id="time">
        剩余时间:<div id="count"></div>秒
    </div>
    <canvas width="600" height="600" onclick="play(event)"></canvas>

    <div class="reco">
      <input type="button" value="重新开始" onclick="replay()" class="mybutton"/>
      <input type="button" class="mybutton" onclick="startRec(this)" value="语音控制" />

    </div>


    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      var mcanvas = document.querySelector("canvas");
      var ctx = mcanvas.getContext("2d");

      var count = 15; //用来定义棋盘的行数和列数
      var map = new Array(count);

      for (var i = 0; i < map.length; i++) {
        map[i] = new Array(count);
        for (var j = 0; j < map[i].length; j++) {
          map[i][j] = 0;
        }
      }

      var black = new Image();
      var white = new Image();
      black.src = "./static/img/black.png";
      white.src = "./static/img/white.png";

      //绘制棋盘线
      ctx.strokeStyle = "#fff";
      var rectWH = 40; //设置绘制矩形的大小
      for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {
          ctx.strokeRect(j * rectWH, i * rectWH, rectWH, rectWH);
        }
      }

      // 黑白子的切换
      var isBlack = true;

      function play(e) {
        countdown(300);
        //canvas的左上角为（0,0） 点
        var leftOffsetx = 620; //body 的margin
        var leftOffsety = 148; //body 的margin
        console.log(e.clientX+" "+e.clientY,"point");
        var x = e.clientX - leftOffsetx;
        var y = e.clientY - leftOffsety;
        console.log(x+" "+y);
        // 获取点击的位置进行判断如果超过格子的一半则绘制到下一个点如果小于 则绘制在上一个点上
        var xv = (x - rectWH / 2) / rectWH;
        var yv = (y - rectWH / 2) / rectWH;

        var col = parseInt(xv) + 1;
        var row = parseInt(yv) + 1;
        console.log(xv + " " + yv + " , " + col + " " + row);

        //验证所输入的点是否在数组中已经存在
        if (map[row][col] != 0) {
          alert("此处已经落子");
          return;
        }

        // 切换绘制黑白子
        if (isBlack) {
          ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
          isBlack = false;
          map[row][col] = 1;

          $.ajax({
            url: "http://127.0.0.1:7777/judge", //请求的url地址
            type: "post", //设置请求的http方式，method也可以
            dataType: "json", //将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {
              //向服务器端发送的数据
              t: 1,
              row: row,
              col: col,
            },
            success: function (data) {
              //请求成功之后执行的回调函数
              console.log(data);
              if (data.data != "继续"){
                alert(data.data)
              }
            },
            error: function (error) {
              console.log(error);
            },
          });

        } else {
          ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
          isBlack = true;
          map[row][col] = 2;
          $.ajax({
            url: "http://127.0.0.1:7777/judge", //请求的url地址
            type: "post", //设置请求的http方式，method也可以
            dataType: "json",
            data: {
              t: 2,
              row: row,
              col: col,
            },
            success: function (data) {
              if (data.data != "继续"){
                alert(data.data)
              }
            },
            error: function (error) {
              console.log(error);
            },
          });
        }
      }

      function startRec(obj){
          obj.value = "录音中..."
          $.ajax({
            url: 'http://127.0.0.1:7777/reccontro',//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',
            data: {

            },
            success: function (data) {//请求成功之后执行的回调函数
              console.log(data.code);
              if(data.code!==200){
                  alert("sorry,无法识别,请务必说出放在哪一行，哪一列")
                  obj.value = "语音控制"
              }else{
                  console.log(data.data.row)
                  var row = data.data.row
                  var col = data.data.col
                  //验证所输入的点是否在数组中已经存在
                  if (map[row][col] != 0) {
                    alert("此处已经落子");
                    return;
                  }

                  // 切换绘制黑白子
                  if (isBlack) {
                    ctx.drawImage(black, col * 40 - 20, row * 40 - 20);
                    isBlack = false;
                    map[row][col] = 1;

                    $.ajax({
                      url: "http://127.0.0.1:7777/judge", //请求的url地址
                      type: "post", //设置请求的http方式，method也可以
                      dataType: "json",
                      data: {
                        t: 1,
                        row: row,
                        col: col,
                      },
                      success: function (data) {
                        if (data.data != "继续"){
                          alert(data.data)
                        }
                        obj.value = "语音控制"
                      },
                      error: function (error) {
                        console.log(error);
                        obj.value = "语音控制"
                      },
                    });

                  } else {
                    ctx.drawImage(white, col * 40 - 20, row * 40 - 20);
                    isBlack = true;
                    map[row][col] = 2;
                    $.ajax({
                      url: "http://127.0.0.1:7777/judge", //请求的url地址
                      type: "post", //设置请求的http方式，method也可以
                      dataType: "json",
                      data: {
                        t: 2,
                        row: row,
                        col: col,
                      },
                      success: function (data) {
                        if (data.data != "继续"){
                          alert(data.data)
                        }
                        obj.value = "语音控制"
                      },
                      error: function (error) {
                        console.log(error);
                        obj.value = "语音控制"
                      },
                    });
                  }
              }
              countdown(300);
            },
            error: function(error){
                console.log(error)
            }
          });
        }

      function replay() {
        $.ajax({
          url: "http://127.0.0.1:7777/replay", //请求的url地址
          type: "post", //设置请求的http方式，method也可以
          dataType: "json",
          data: {

          },
          success: function (data) {
            window.location.href = "/game";
          },
          error: function (error) {
            console.log(error);
          },
        });
      }

    </script>
  </body>
</html>
